@import "../../asset/common";


.order-status-module{
  .option-info{
    .status-track{
      padding: 60px 20px 60px 50px;
    }
    .track-list{
      position:relative;
      height:80px;
      border-radius: 80px;
      z-index: 1;
      &:after{
        content:'';
        position:absolute;
        top:0;
        right:0;
        width:80px;
        height:80px;
        border-top-right-radius: 80px;
        border-bottom-right-radius: 80px;
        border:1px solid #a5a6bb;
        border-left:none;
        @include box-sizing();
        z-index: 1;
      }
      li{
        position:absolute;
        top:0;
        width:8.4%;
        border-top:1px solid #1f8fee;
        z-index: 10;
        &.dashed{
          border-top-style: dashed;
        }
        &.executing{
          border-color:#a5a6bb;
          .dot{
            top:-12px;
            left:-12px;
            background-color:transparent;
            border:6px solid rgba(31,143,238,.3);
            &:after{
              content:"";
              position:absolute;
              top:0;
              left:0;
              width:11px;
              height:11px;
              background-color: #1f8fee;
              border-radius: 100% 100%;
            }
          }
        }
        &.willExecute{
          border-color:#a5a6bb;
          .status-text{
            color:#acadc0;
          }
          .dot{
            background-color:#a5a6bb;
          }
        }
        .status-text{
          position:absolute;
          top:-30px;
          left:-40px;
          width:80px;
          text-align: center;
          font-size:12px;
          color:#515974;
          &.bottom{
            top: 16px;
          }
        }
        .dot{
          position:absolute;
          top:-6px;
          left:-6px;
          width:11px;
          height:11px;
          border-radius: 100% 100%;
          background-color:#1f8fee;
        }
      }
    }
    .install-track-list {
      &:after{
        content:none;
      }
      li{        
        width: 8%;
        top: 50%;
        z-index: auto;
        &:first-child {
          width: 0;
        }
        &.has-line{
          &:after, &:before{
            content: '';
            position: absolute;
            top: 0;
            right: -1px;
            width: 0;
            height: 40px;
            border-left: 1px solid #a5a6bb;
            overflow: hidden;
            display: block;
            z-index: 1;
          }
          &:before {
            top: -40px;
            border-left-style: dashed;
          }
          .status-text {
            top: -10px;
            right: -80px;
          }
        }
        &.executed {
          &:after, &:before{
            border-color: #1f8fee;
          }
        }
        &.top {
          &:after{
            border-color: #a5a6bb;
          }
        }
        &.bottom {
          &:before{
            border-color: #a5a6bb;
          }
        }
        &.installing{
          top: 80px;
        }
        &.can-not-install{
          top: 0;
        }
        .dot{
          left: auto;
          right: -6px;
          z-index: 2;
        }
        .status-text{
          left: auto;
          right: -40px;
        }
        &.executing {
          border-color: #1f8fee;
          .dot {
            left: auto;
            right: -12px;
          }
        }
      }
    }
  }
}